<template>
	<view class="w-full">
    <up-calendar :show="show" :defaultDate="innerValue" allowSameDay mode="range" @confirm="handleDateChange" @close="handleDateCancel"></up-calendar>
    <view @click="handleShow">
			<slot :value="valueName">
				<view class="date flex-1">
          <view class="value flex-1">{{ valueName }}</view>
        </view>
			</slot>
		</view>
	</view>
</template>

<script setup>
import dayjs from 'dayjs';
import { ref, computed, watch } from 'vue';

const prop = defineProps({
	value: {
		type: Number,
	},
  placeholder: {
		type: String,
		default: '请选择'
	}
})
const emit = defineEmits(['update:value', 'confirm']);

const show = ref(false);

const innerValue = computed({
	get() {
		return prop.value||[]
	},
	set(val) {
		emit('update:value', val)
	}
});

const valueName = computed(() => {
  if(innerValue.value.length == 0) {
    return prop.placeholder
  }
  return innerValue.value.join(' - ');
});

/**
 * 显示选择器
 */
function handleShow() {
	show.value = true;
}

/**
 * 确认选择
 */
function handleDateChange(e) {
	show.value = false;
  innerValue.value = e;
  emit('confirm', e);
}

/**
 * 取消选择
 */
function handleDateCancel() {
	show.value = false;
}

</script>
<style lang="scss" scoped>
.date {
  background-color: #f5f5f5;
  border-radius: 80rpx;
  padding: 10rpx 30rpx;
  margin: 0rpx;
  line-height: 60rpx;
}
</style>